<template>
  <div class="component ui-house-li">
    <router-link :to="{ path: '/apartmentDetail', query: {id: houseLi.id} }">
      <div class="house">
        <section class="cover">
          <!-- <p class="mian-ya" v-if="houseLi.isFreeDeposit == 1">免押</p> -->
          <img class="h-thumb" :src="houseLi.photoUrl" />
          <!-- <div class="mark">已审核</div> -->
        </section>
        <!-- <img class="renting-logo-img" src="../../../images/renting-logo.png" v-if= "houseLi.status === 1002"> -->
        <!--{{houseLi.status}}-->
        <section class="ui-house-info">
          <h3 class="name">{{houseLi.name}}</h3>
          <p class="structure">
            {{houseLi.apartmentLayout.split('-')[0]}}室
            {{houseLi.apartmentLayout.split('-')[1]}}厅
            {{houseLi.apartmentLayout.split('-')[2]}}卫/
            <span v-if="+houseLi.area > 0">
              <span> {{houseLi.area}} </span>
              <span class="area-unit">m</span>
              <sup>2</sup>
            </span>
          </p>
          <address class="address">{{houseLi.address}}</address>
          <div class="price-time">
            <span class="price"><em>￥{{houseLi.price}}</em>/月</span>
          </div>
        </section>
      </div>
    </router-link>
  </div>
</template>
<script>
export default {
  name: 'houseList',
  props: ['houseInfo'],
  computed: {
    houseLi () {
      return this.houseInfo ? this.houseInfo : {}
    }
  }
}
</script>
<style lang="less" scoped>
  .cover {
    position: relative;
    .mark{
      width: 1.8rem;
      height: 0.75rem;
      background: #ff9600;
      font-size: 0.9rem;
      color: #fff;
    }
  }
  .h-thumb {
    width: 6.9rem;
    height: 5.15rem;
        position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
  }
  .area-unit {
    font-size: 0.7rem;
  }
  .ui-house-li {
    border-bottom: 1px solid #f4f4f4;
    &:last-child {
      border-bottom: none;
    }
  }
  .ui-house-info {
    padding-left: 1.0rem;
    h3 {
      color: #000;
      font-size: 0.8rem;
      height: auto;
    }
  }
  sup {
    font-size: 0.5rem;
  }
  address {
    font-style: normal;
    font-size: 0.7rem;
    height: 1.1rem;
    line-height: 1.1rem;
    color: #999;
  }
  .house .ui-house-info address.address::before {
    height: 0.5rem;
    width: 0.55rem;
    top: 0.05rem;
  }
  .structure {
    font-size: 0.7rem;
    color: #666;
    position: relative;
    bottom: -0.05rem;
  }
  .price-time {
    position: relative;
    bottom: -0.1rem;
    .price{color: #ff3c00;font-size: 0.75rem;}
    em{font-size: 0.8rem;}
  }
   .renting-logo-img{
      position: absolute;
      left:21%;
      top:10%;
      width:20%;
      z-index: 2;
    }
</style>
<style>
  .mian-ya {
    font-family: "Helvetica Neue", sans-serif;
    width: 1.9rem;
    height: 0.75rem;
    line-height: 0.75rem;
    text-align: center;
    font-size: 0.6rem;
    background: #f39700;
    color: white;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
  }
</style>
